<template>
    <mian-layout>
        <el-descriptions labelClassName="mysdItemLable" title="NFT锻造详情" :column="2" border>
            <el-descriptions-item label="创作者头像">
                <div class="imgItemBox">
                    <a :href="oDetail.nftImage" target="_block"><img :src="oDetail.nftImage"></a> 
                </div>
            </el-descriptions-item>
            <el-descriptions-item label="NFT描述">{{oDetail.nftDescription}}</el-descriptions-item>
            <el-descriptions-item label="NFTID">{{oDetail.bornId}}</el-descriptions-item>
            <el-descriptions-item label="NFT名称">{{oDetail.nftName}}</el-descriptions-item>
            <el-descriptions-item label="创造者ID">{{oDetail.creatorId}}</el-descriptions-item>
            <el-descriptions-item label="创造者钱包地址">{{oDetail.creatorAddress}}</el-descriptions-item>
            <el-descriptions-item label="关联产业类型">
                <template v-if="oDetail.nftType==1">城市地标</template>
                <template v-else-if="oDetail.nftType==2">广告位</template>
                <template v-else-if="oDetail.nftType==3">道具</template>
                <template v-else-if="oDetail.nftType==5">其它</template>
            </el-descriptions-item>
            <el-descriptions-item label="关联产业ID">{{oDetail.relationId}}({{oDetail.relationName}})</el-descriptions-item>
            <el-descriptions-item label="状态">
                <span v-if="oDetail.tradeStatus==0">待锻造</span>
                <span v-else-if="oDetail.tradeStatus==1">锻造中</span>
                <span v-else-if="oDetail.tradeStatus==2">锻造成功</span>
                <span v-else-if="oDetail.tradeStatus==3">锻造失败</span>
            </el-descriptions-item>
            <el-descriptions-item label="提交锻造时间">{{oDetail.createTime}}</el-descriptions-item>
            <el-descriptions-item v-if="oDetail.tradeStatus==3" label="失败原因">--</el-descriptions-item>
        </el-descriptions>
        <br/>

        <div style="text-align: center;">
            <my-back type="info" :reGetDataFlag="true">返回</my-back>
            <template v-if="oDetail.tradeStatus==0">
                <el-button type="success" plain icon="el-icon-s-promotion" @click="doneForget(oDetail)">提交锻造</el-button>
                <el-button type="success" plain icon="el-icon-delete" @click="del(oDetail)">删除</el-button>
            </template>
            <template v-if="oDetail.tradeStatus==2">
                <el-button type="success" plain icon="el-icon-close" @click="destroyForget(oDetail.bornId)">销毁</el-button>
                <el-button type="success" plain icon="el-icon-s-promotion" @click="applySellFlag=true">发布出售</el-button>
            </template>
        </div>
        <apply-sell v-if="applySellFlag" @close='applySellFlag=false' :id='oDetail.bornId'/>
    </mian-layout>
</template>
<script>
import {mapGetters} from "vuex"
import myTable from '@/components/public/myTable';
import myBack from '@/components/public/myBack.vue'
import applySell from './components/applySell.vue'
import {
  get_forget_detail,
  done_forget,
  del_forget,
  destroy_forget
} from '@/api/collext'
export default {
    components:{
      myTable,
      myBack,
      applySell
    },
    data(){
        return{
            id:'',
            oDetail:{},
            sceneNames:[],
            applySellFlag:false
        }
    },
    computed:{
        ...mapGetters({
            'userInfo':'user/userInfo'
        })
    },
    created(){
        this.id = this.$route.params.id
        this.getData()
    },
    methods:{
        async getData(){ 
            const res = await get_forget_detail({bornId:this.id})
            this.oDetail = res.data
        },
        doneForget(item){
            this.$confirm('确认锻造该NFT?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await done_forget({bornId:item.bornId})
                if(res.success){
                    this.$message.success('锻造成功')
                    this.getList()
                }else{
                    this.$message.error(res.message || '锻造失败');
                }
            }).catch(() => {});
            
        },
        destroyForget(bornId){
            this.$confirm('确认销毁该NFT?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await destroy_forget({bornId})
                if(res.success){
                    this.$message.success('销毁成功')
                    this.getList()
                }else{
                    this.$message.error(res.message || '销毁失败');
                }
            }).catch(() => {});
            
        },
        del(item) {
            this.$confirm('确认删除该NFT?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await del_forget({bornId:item.bornId})
                if(res.success){
                    this.$message.success('删除成功')
                    this.page.pageIndex = 1
                    this.getList()
                }else{
                    this.$message.error(res.message || '删除失败');
                }
            }).catch(() => {});
        },
        goDetail(){
            sessionStorage.setItem('details',JSON.stringify(this.oDetail))
            this.$router.push(`/card/add?id=${this.oDetail.cardId}`)
        }
    }
}
</script>
<style lang="scss" scoped>
    .imgItemBox{
        display: flex;
        img{
            display: block;
            height: 100px;
            width: 100px;
            margin: 0 10px 0 0;
        }
    }
    .imgList{
        display: flex;
        padding: 0 0 10px 0;
        img{
            display: block;
            height: 70px;
        }
        p{
            display: flex;
            align-items: center; 
            padding: 0 0 0 20px;
        }
    }
</style>
<style lang="scss">
    .mysdItemLable{
        width: 150px;
    }
</style>